<template>
  <div class="orders">
    <header-bar title="订单记录"></header-bar>
    <div class="content">
      <ul class="order-list">
      <li v-for="(order, index) in orders" :key="index" class="order">
        <div class="date">
          <span class="item-bar"></span>
          {{order.address}}
        </div>
        <ul class="foods">
          <li v-for="(food, foodIndex) in order.foods" :key="foodIndex" class="food">
            <span class="food-name">{{food.name}}</span>
            <span class="food-count">x{{food.count}}</span>
          </li>
        </ul>
        <span class="total">共{{order.foods.length}}个商品，合计<span class="order-total">¥{{order.total}}</span></span>
        <div class="order-status">{{order.status}}</div>
      </li>
    </ul>
    </div>
    
  </div>
</template>

<script>
  import HeaderBar from '@/components/HeaderBar'

  export default{
    components: {
      HeaderBar
    },
    data(){
      const orders = []
      for(let i = 0; i<5; i++){
        orders.push({
        	address:'内部餐厅',
          date: '2017-6-3',
          status: '订单已完成',
          total: 45,
          foods: [
            {
              name: '鱼香肉丝',
              count: 1
            },
            {
              name: '鲜味啤酒鸭饭',
              count: 2
            },
            {
              name: '甜烧白',
              count: 2
            }
          ]
        })
      }
      return {
        orders
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';
  @import '~@/styles/mixin.less';

  .orders{
    .order-list{
      padding: 12px;
      .order{
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;
        .border-1px(#e1ddd9);
        font-size: 14px;
        
        .date{
          display: flex;
          align-items: center;
          font-weight:bold;
          letter-spacing:1px;
          .item-bar{
          display: inline-block;
          width: 8px;
          height: 18px;
          background-color: @color-theme-yellow-medium;   
          margin-right: 6px;
        }
        }
      .food{
        display: flex;
        justify-content: space-between;
        margin-left: 13px;
        .food-name{
    	   font-size: smaller;
    	   color: #989898;
    	   letter-spacing:1px;
        }
        .food-count{
         font-size: smaller;
    	   color: #989898;
        }
      }
      .total{
        align-self: flex-end;
         font-size: smaller;
    	   color: #989898;
        .order-total{
        	font-size: 15px;
        	color: black;
        	margin-left: 10px;
        }
      }

      .order-status{
        position: absolute;
        top: 0;
        right: 12px;
         font-size: smaller;
    	   color: #989898;
    	   letter-spacing: 1.5px;
       /* border: 1px solid #f00;*/
      }

    }
    }
    

    .content{
      position: absolute;
      top: @height-header-bar;
      bottom: 0;
      width: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  }
</style>

